const san = require('/js-modules/common/san/san.js')
const { preStop } = require('commonFun')
const Dialog = san.defineComponent({
    template: `
        <template>
            <div s-if="{{open}}" class="san-dialog-wrap {{ class }}">
                <div class="s-dialog dialog-mask"></div>
            
                <div class="table-wrapper">
                    <div class="dialog-ctn-wrap">
                        <div class="dialog-ctn {{opts.height > 0 ? 'beFixed' : ''}}" style="width: {{ opts.width || 416 }}px; height: {{opts.height || ''}}px;">
                            <div class="head">
                                <slot name="iconTip"></slot>
                                <h1>{{opts.title || '提示'}}</h1>
                                <i class="iconfont icon-icon_close" on-click="close">&#xe72a;</i>
                            </div>
                            <div class="ctn">
                                <slot name="dialog-ctn"></slot>
                            </div>
                            <div class="btm" style="text-align: {{ opts.btnCenter ? 'center' : '' }}">
                                <template s-if="opts.btnCenter">
                                    <a s-if="!opts.noclose" class="btn btn-default" on-click="default" style="float: none">{{opts.closeText
                                        ||
                                        opts.text || '取消'}}</a>
                                    <a s-if="opts.hasComfirm" class="btn btn-primary" on-click="primary" style="float: none">{{opts.confirmText
                                        || '确定'}}</a>
                                </template>
                                <template s-else>
                                    <slot name="dialog-footer"></slot>
                                    <a s-if="opts.hasComfirm" class="btn btn-primary {{ canop ? '' : 'disabled' }}" on-click="primary">
                                        <template s-if="canop">
                                            {{opts.confirmText || '确定'}}
                                        </template>
                                        <i s-else class="iconfont comfirm-rotate">&#xe651;</i>
                                    </a>
                                    <a s-if="!opts.noclose" class="btn btn-default" on-click="default">{{opts.closeText ||
                                        opts.text || '取消'}}</a>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    `,
    close() {
        const canop = this.data.get('canop')
        if (!canop) return
        this.data.set('open', false)
        this.fire('close')
    },
    inited() {
        this.watch('canop', v => {
            let times = 0;
            let t = setInterval(() => {
                if (v) return clearInterval(t)
                if (times >= 9) {
                    this.data.set('canop', true)
                    times = 0
                    clearInterval(t)
                    return
                }
                times++
            }, 500)
        })
        this.watch('open', v => {
            if (v) {
                this.data.set('canop', true)
                let tops = $(document).scrollTop();
                $(document).bind("scroll", function () {
                    $(document).scrollTop(tops);
                });
            }else{
                $(document).unbind("scroll")
            }
        })
    },
    done (cb) {
        this.data.set('open', false)
        this.data.set('canop', true, { force: true })
        cb && cb()
    },
    primary() {
        this.fire('confirm', this)
        this.data.set('canop', false, { force: true })
    },
    default(e) {
        preStop(e)
        this.close()
        this.fire('cancel')
        return false
    },
    initData () {
        return {
            canop: true
        }
    }
})

module.exports = Dialog;